<script setup lang="ts">
import type { BaseCourseItem, StudentCourseListCoursesItem } from '@/api/types/student'
import { handleApiError } from '@/api'
import { experienceApi } from '@/api/modules/experience'
import { studentApi } from '@/api/modules/student'
import Empty from '@/components/Empty.vue'
import NavBar from '@/components/NavBar/index.vue'
import { useCurrentStudentInfoStore } from '@/stores/modules/useCurrentStudentInfoStore'
import { navigateBack, navigateTo } from '@/utils/navigation'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import ExperienceCourseCard from './components/ExperienceCourseCard.vue'
import FormalCourseCard from './components/FormalCourseCard.vue'

const studentInfoStore = useCurrentStudentInfoStore()

const activeTab = ref('my') // 当前激活的标签
const tabs = ref([
  { label: '我的课程', value: 'my' },
  { label: '体验课程', value: 'experience' },
])

const courseList = ref<StudentCourseListCoursesItem[]>([])
const experienceCourseList = ref<BaseCourseItem[]>([])

async function loadCourseList() {
  const [error, result] = await studentApi.getStudentCourseList({
    studentId: studentInfoStore.studentId,
    lessonId: studentInfoStore.lessonId,
  })

  if (error) {
    return handleApiError(error)
  }

  if (result.data.courses.length === 0) {
    tabs.value.shift()
  }

  courseList.value = result.data.courses
}

async function loadExperienceCourseList() {
  const [error, result] = await experienceApi.getCourseList()
  if (error) {
    return handleApiError(error)
  }
  experienceCourseList.value = result.data
}

onShow(() => {
  loadExperienceCourseList()
  loadCourseList()
})

function handleCourseTap(course: StudentCourseListCoursesItem) {
  const courseId = course.course.id
  navigateTo({
    url: `/pages/student/unitSelect/index`,
    params: {
      courseId,
    },
  })
}

function handleExperienceCourseTap(course: BaseCourseItem) {
  navigateTo({
    url: `/pages/student/unitSelect/index`,
    params: {
      type: 'experience',
      courseId: course.id,
    },
  })
}
</script>

<template>
  <view class="course-page">
    <!-- 使用 NavBar 组件 -->
    <NavBar v-model="activeTab" :tabs="tabs" @left-click="navigateBack" />

    <view class="course-list">
      <!-- 正式课程列表 -->
      <template v-if="activeTab === 'my'">
        <FormalCourseCard
          v-for="course in courseList"
          :key="course.course.id" :course="course"
          @tap="handleCourseTap(course)"
        />

        <Empty v-if="courseList.length === 0" />
      </template>

      <template v-if="activeTab === 'experience'">
        <!-- 体验课程列表 -->
        <ExperienceCourseCard
          v-for="course in experienceCourseList"
          :key="course.id" :course="course"
          @tap="handleExperienceCourseTap(course)"
        />

        <Empty v-if="experienceCourseList.length === 0" />
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.course-page {
    .course-list {
        padding: 36rpx;
    }
}
</style>
